import { Form, Input, Tooltip, Icon,DatePicker,TimePicker, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
import React from 'react'

const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const residences = [
    {
    value: '江苏',
    label: '江苏',
    children: [{
        value: '南京',
        label: '南京',
        children: [{
            value: '江宁区',
            label: '江宁区',
        },{
            value: '建邺区',
            label: '建邺区',
        },{
            value: '雨花台区',
            label: '雨花台区',
        },{
            value: '鼓楼区',
            label: '鼓楼区',
        },{
            value: '秦淮区',
            label: '秦淮区',
        },{
            value: '玄武区',
            label: '玄武区',
        },{
            value: '浦口区',
            label: '浦口区',
        },{
            value: '栖霞区',
            label: '栖霞区',
        },{
            value: '溧水区',
            label: '溧水区',
        },{
            value: '高淳区',
            label: '高淳区',
        }],
    }],
}];

class RegistrationForm extends React.Component {
    state = {
        confirmDirty: false,
    };
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }

        const rangeTimeValue = values['range-time-picker'];
        const fieldValues = {
            ...values,
            'range-time-picker': [
                rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
                rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
            ]
        };
        console.log('Received values of form: ', fieldValues);
        });
    }
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }
    render() {
        const { getFieldDecorator } = this.props.form;

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 4 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 8,
                    offset: 6,
                },
            },
        };
        const rangeConfig = {
            rules: [{ type: 'array', required: true, message: 'Please select time!' }],
        };
        return (
            <Form onSubmit={this.handleSubmit}>
                <FormItem
                    {...formItemLayout}
                    label="活动名称"
                >
                    {getFieldDecorator('activityName', {
                        rules: [{ required: true, message: '请输入活动名称!', whitespace: false }],
                    })(
                        <Input  onBlur={this.handleConfirmBlur}/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="活动时间"
                >
                    {getFieldDecorator('range-time-picker', rangeConfig)(
                        <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="活动规模"
                >
                    {getFieldDecorator('size', {
                        rules: [{ required: true, message: '请输入活动规模!' }],
                    })(
                        <Input placeholder={"请输入活动人数"} onBlur={this.handleConfirmBlur}/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="活动地点"
                >
                    {getFieldDecorator('address', {
                        initialValue: ['江苏', '南京', '建邺区'],
                        rules: [{ type: 'array', required: true, message: '请输入活动地点' }],
                    })(
                        <Cascader options={residences} />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="活动详细地点"
                >
                    {getFieldDecorator('address1', {
                        rules: [{ required: true, message: '请输入活动详细地点!', whitespace: false }],
                    })(
                        <Input placeholder={"如：江东中路300号"} onBlur={this.handleConfirmBlur}/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="会议地点"
                >
                    {getFieldDecorator('address2', {
                        rules: [{ required: true, message: '请输入会议地点!', whitespace: false }],
                    })(
                        <Input placeholder={"如：南京博览中心"} onBlur={this.handleConfirmBlur}/>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="活动费用"
                >
                    {getFieldDecorator('price', {
                        rules: [{ required: true, message: '请输入活动价格，免费为0!' }],
                    })(
                        <Input placeholder={"请输入活动价格，免费为0"} onBlur={this.handleConfirmBlur} />
                    )}
                </FormItem>
                <FormItem {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">Register</Button>
                </FormItem>
            </Form>
        );
    }
}

const WrappedRegistrationForm = Form.create()(RegistrationForm);
export default WrappedRegistrationForm